<template>
  <el-dialog title="中转超时订单" :visible.sync="visible" width="width:1000px" @close="onClose" append-to-body>
    <XmTable :config="tableConfig" :tableData="tableData" class="table" ref="table">
      <div slot="filter">
        <el-form class="fr" :inline="true" ref="form">
          <el-form-item>
            <el-button type="primary" @click="search" size="small" style="margin-left: 10px;">刷新
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <template slot="column-type" slot-scope="{data}">
        <span>{{addedServicesTypeMap[data.type]}}</span>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button type="text" size="small" @click="approval(data)">
          处理
        </el-button>
        <el-button type="text" size="mini" @click="showLog(data)">查看日志</el-button>
      </template>
    </XmTable>
    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
    <handleDialog ref="handleDialog" @fetch="fetch"></handleDialog>
  </el-dialog>
</template>

<script>
import {
  tableConfig, // 订单日志
} from './config'
import {
  listOvertimeOrders,
  disposeOvertimeOrder,
} from "@/api/transfer";
import orderLogDialog from '@/components/dialog/orderLogDialog'
import handleDialog from './handleDialog'

export default {
  components: {
    orderLogDialog,
    handleDialog
  },
  data() {
    const cityId = JSON.parse(localStorage.getItem('saber-areaId'))['content']
    return {
      tableConfig,
      visible: false,
      cityId,
      tableData: [],
    };
  },
  methods: {
    async show() {
      this.visible = true
      this.$nextTick(() => {
        this.fetch()
      })
    },
    hide() {
      this.visible = false
    },
    approval(data) {
      this.$refs.handleDialog.show({data})
    },
    fetch() {
      listOvertimeOrders({cityId: this.cityId}).then(res => {
        this.tableData = (res.data && res.data.data) || []
      })
    },
    search() {
      this.fetch()
    },
    onClose() {
      this.$emit('close')
    },
    showLog(data) {
      this.$refs.orderLogDialog.show({ orderId: data.id })
    }
  },
  created() {
  }
};
</script>
<style lang="scss" scoped>
</style>